<script setup lang="ts">
import { useTemplateRef, watch, ref, nextTick } from 'vue'

const { loadingSubmit, loadingTest } = defineProps(['loadingSubmit', 'loadingTest'])
const emit = defineEmits(['submitCode', 'openDrawer', 'closeDrawer', 'testCode'])
const footerResizable = defineModel<boolean>('resizable', { default: true })
const test_case = defineModel<{ input: string, output: string, expected: string }>('test_case', { required: true })
const open = ref(false)
import UpArrowIcon from "@/components/icons/UpArrowIcon.vue"
import DownArrowIcon from "@/components/icons/DownArrowIcon.vue"
const drawerMask = useTemplateRef('drawer-mask') as any
const onClose = () => {
    if (drawerMask.value)
        drawerMask.value.style.display = 'none'
}
const onOpen = () => {
    if (drawerMask.value)
        drawerMask.value.style.display = 'block'
}
watch(open, (newValue) => {
    if (newValue === false) {
        footerResizable.value = false
        emit('closeDrawer')
        nextTick(onClose)
    } else if (newValue === true) {
        onOpen()
        footerResizable.value = true
        emit('openDrawer')
    }
}, { immediate: true })
</script>
<template>
    <div id="drawer-container">
        <a-button type="circle" @click="open = !open">
            <template #icon>
                <component :is="open ? DownArrowIcon : UpArrowIcon"></component>
            </template>
        </a-button>

        <div id="drawer-header">
            <a-button type="primary" :loading="loadingTest" @click="emit('testCode')">测试代码</a-button>
            <a-button type="primary" danger :loading="loadingSubmit" @click="emit('submitCode')">提交代码</a-button>
        </div>

        <div ref="drawer-mask" id="drawer-mask" style="width: 100%;height: 100%;">
            <a-row style="height: 100%;">
                <a-col :span="12">
                    <a-textarea v-model:value="test_case.input" placeholder="请输入测试输入"></a-textarea>
                </a-col>
                <a-col :span="12">
                    <a-textarea disabled v-model:value="test_case.output" placeholder="输出 ..."></a-textarea>
                </a-col>
            </a-row>

        </div>
    </div>

</template>
<style scoped>
:deep(.ant-btn-circle) {
    position: relative;
    left: 50%;
    margin-top: -1rem;
    display: block;
    border: none;
    cursor: pointer;
    z-index: 100000;
    background-color: #f5f5f5;
    text-align: center;
}

:deep(.ant-btn-circle > span) {
    font-size: 20px;
    color: #fff;
}

#drawer-container {
    width: 100%;
    position: absolute;
}

#drawer-mask {
    overflow: auto;
    min-height: 12.5rem;
}

#drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem;
    background-color: #f5f5f5;
}
</style>